<template>
    <van-image
      width="100%"
      height="500"
      fit="cover"
      :src="product.thumbs_text"
    />

    <div class="detailbox">
      <h4>{{ product.name }}</h4>
      <div class="price">
        单独购买：<em>(￥{{ product.price }})</em>
      </div>
    </div>
    
    <div class="allkbox"></div>
    
    <!-- 商品规格 -->
    <div class="info_choice">
      <!-- Sku 商品规格 -->
      <div class="commodity" @click="SkuShow = true">
        <div class="opt">
          <div class="title wanl-gray">选择</div>
          <div class="option">
            <div class="selected">
              <div>
                <span>尺码</span>
                <span>颜色</span>
              </div>
            </div>
          </div>
        </div>
        <div class="wanl-gray">
          <img src="/assets/images/go.png" />
        </div>
      </div>
      <!-- 服务 -->
      <div class="commodity" @click="TipShow = true">
        <div class="opt">
          <div class="title wanl-gray">服务</div>
          <div class="option">
            <div class="selected">
              <div>
                <span>7天无理由退款</span>
                <span>·</span>
                <span>24小时内发货</span>
                <span>·</span>
                <span>假一赔十</span>
              </div>
            </div>
          </div>
        </div>
        <div class="wanl-gray">
          <img src="/assets/images/go.png" />
        </div>
      </div>
    </div>

    <div class="allkbox"></div>

    <!-- 选项卡 -->
    <van-tabs v-model:active="TabActive" type="card" color="#EE0A24">
      <van-tab title="产品参数">
          <div style="text-align: center;margin-bottom: 10px;" v-html="product.content"></div>
          <!-- v-html= 使用这个属性 标签内部不可布局了 -->
          <!-- 描述
          <div ></div> -->
      </van-tab>
      <van-tab title="商品评价">
        <div class="rate" style="overflow-x: hidden;">
          <div class="rate-header">
            <div class="rate-score">
              <h4>与描述相符</h4>
              <strong>{{rate}}</strong>
            </div>
            <div class="rate-graph">
              <van-rate v-model="rate" allow-half readonly />
            </div>
          </div>

          <div class="rate-content">
            <!-- 有人评价的情况下 -->
            <div v-if="comment.length > 0">
              <div class="review-box" v-for="(item,key) in comment" :key="key">
                <div class="review-item">
                  <!-- 评论人 -->
                  <div class="from-whom">
                    <div class="avatar">
                      <img src="/assets/images/avatar.png" />
                    </div>
                    <div class="name">{{ item.business.nickname }}</div>
                  </div>

                  <!-- 评论内容 -->
                  <div class="review-details">
                    <div class="content">评论内容</div>
                    <div>
                        <img :src="item.business.avatar_text" />
                    </div>
                    <div class="time">{{ item.comtime_text }}</div>
                    <van-rate v-model="item.rate" readonly />
                  </div>
                </div>
              </div>
            </div>
            <!-- 无人评价时 -->
            <div v-else>
              <div class="rate-empty">该商品还没有人写评价呢</div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>

    <!-- 协议条款 -->
    <van-action-sheet v-model:show="TipShow" title="协议条款">
      <div class="ProductTip">
        三、我们如何使用信息 <br />
        四、我们如何共享信息<br />
        五、我们如何转让信息<br />
        六、我们如何公开披露信息<br />
        七、一般储存期限<br />
        八、我们如何确保您的信息安全<br />
        九、您能做什么<br />
        十、我们如何处理未成年人的个人信息<br />
        十一、您的个人信息的存储地点<br />
        十二、本隐私权政策不适用的范围<br />
        十三、本隐私权政策如何更新<br />
        十四、联系我们<br />
      </div>
    </van-action-sheet>

    <!-- 底部导航栏 -->
    <van-action-bar class="van-action-bar">
      <van-action-bar-icon icon="chat-o"  text="客服" />
      <!-- 购物车 -->
      <!-- 购物时  badge="9"数字提醒-->

      <van-action-bar-icon v-if="product.shopCart" icon="cart-o"  :badge="product.cart" text="购物车" @click="ToCart" />
      <!-- 没购物时 -->
      <van-action-bar-icon v-else icon="cart-o" text="购物车" @click="ToCart"/>
      <!-- 收藏 -->
      <van-action-bar-icon icon="star" v-if="product.collection" @click="collection" text="已收藏" />
      <van-action-bar-icon icon="star-o" v-else @click="collection" text="收藏" />
      <van-action-bar-button type="danger" @click="SkuShow = true" text="立即购买" />
    </van-action-bar>
    <!-- sku商品规格 -->
    <van-sku
      ref="SkuRef"
      v-model="SkuShow"
      :sku="sku"
      :goods="goods"
      :goods-id="product.id"
      :properties = "properties"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked" 
    />
    <!--@buy-clicked="onBuyClicked" 加入购物车  @add-cart="onAddCartClicked" 加入购物车 -->
</template>

<script setup>
  import VanSku from 'vant-sku';
  import 'vant-sku/dist/index.css'
  const {proxy} = getCurrentInstance()
  //选项卡
  let TabActive = ref(0)
  let rate = ref(0)
  // let show = ref(false)
  let product = ref({});//商品的接受值
  let comment = ref([]);//评论的内容
  let busid = proxy.$business.value.id;
  let proid = proxy.$route.query.proid;

  //sku 商品规则 vant2
  let sku = ref({})//sku商品数据
  let goods = ref({})//商品信息 goods-id 商品id
  let properties = ref([]) //商品属性
  let SkuShow = ref(false)
  let SkuRef = ref({})
  
  //条款服务
  let TipShow = ref(false)
  onMounted(()=>{
    ProductInfo()
  })
  //点击后初始页面显示
  const ProductInfo = async ()=>{
    var params = {
      busid:busid,
      proid:proid
    }
    //发送同步请求  
    var result = await proxy.$POST({
      url:'/product/info',
      params:params
    })
    if(result.code == 0){
      proxy.$fail({
        message:result.msg,
        duration:1000,
        onClose: ()=>proxy.$router.go(-1)
      })
    }
    var rateSum = 0;
    //成功后则将返回的值返回给前端
    product.value = result.data.product;
    if(result.data.comment!=''){
      comment.value = result.data.comment;
      result.data.comment.map((val)=>{
        val.rate = parseInt(val.rate)
        if(val.rate=='NaN'){
          val.rate=0;
        }
        rateSum += val.rate;
      })
      
      // rate.value = parseFloat(rateSum/result.data.comment.length).toFixed(1);//这个方法会将rate 转化成字符串形式
      rate.value = Math.round((rateSum/result.data.comment.length) * 10) / 10;
    }
    //出来时把rate转化成整型
   
    //接受一下所有的值

    //sku商品规则
    sku.value = result.data.sku;
    // 默认商品 sku 缩略图
    // picture: 'https://img01.yzcdn.cn/1.jpg';
    goods.value = {picture: product.value.thumbs_text} //相当于默认图片
    properties.value = result.data.properties;
    properties.value = Object.values(properties.value);//直接赋予对象里面的值
  }
  //收藏
  const collection = async ()=>{
    //先判断是否登录
    if(!busid){
      //没登录请先登录
      proxy.$fail('请先登录!')
      return false;
    }
    //发送异步
    var params = {
      busid:busid,
      collectid:proid
    }
    //发送同步请求  
    var result = await proxy.$POST({
      url:'/product/collection',
      params:params
    })
    //出错做拦截
    if(result.code == 0){
      proxy.$fail(result.msg)
      return false
    }
    //成功给个提醒
    proxy.$success({
      message:result.msg,
      duration:1000,
      onClose: ()=>proxy.$router.go(0),
    })
  }
  //加入购物车
  const onAddCartClicked = async (AddCart)=>{
      //先判断是否登录
      if(!busid){
        //没登录请先登录
        proxy.$fail('请先登录!')
        return false;
     }
     //判断是否选规格
     if(properties.value.length > 0 && !AddCart.selectedSkuComb){
        proxy.$fail('请选规格!')
        return false;
     }
     //数量不能少于1
     if(AddCart.startSaleNum<0){
        proxy.$fail('数量不能小于0!')
        return false;
     }
     //需要传递的值
    //  busid
    //  proid
    //  规则的id
    //  数量的
    let relationids = [];
    //有规格的情况下
    if(properties.value.length>0){
      //规格
      let SkuProps = AddCart.selectedSkuComb.properties;
      SkuProps.map((item)=>{
        var id = item['v'][0] ?item['v'][0]['id'] : 0;
        if(id) relationids.push(id)
      })
    }
    //封装数据
    var params = {
      busid:busid,
      proid:proid,
      relationids:relationids.join(","),//转化成字符串
      nums:AddCart.selectedNum//数量
    }
    // console.log(AddCart.selectedNum)
    //隐藏弹出框 把弹出框隐藏
    SkuShow.value = false
    //发起请求
    var result = await proxy.$POST({
      url:'/cart/add',
      params
    })
    console.log(result)
    if(!result) return false
    if(result.code == 0){
      proxy.$fail(result.msg)
      return false
    }
    proxy.$success(result.msg)
    ProductInfo()
    // //并返回购物车的数量
    // product.value.cart = result.data.cart;
  }
  //立即购买
  const onBuyClicked = async (AddCart)=>{
        //先判断是否登录
    if(!busid){
      //没登录请先登录
      proxy.$fail('请先登录!')
      return false;
     }
     //判断是否选规格
     if(properties.value.length > 0 && !AddCart.selectedSkuComb){
        proxy.$fail('请选规格!')
        return false;
     }
     //数量不能少于1
     if(AddCart.startSaleNum<0){
        proxy.$fail('数量不能小于0!')
        return false;
     }
     //需要传递的值
    //  busid
    //  proid
    //  规则的id
    //  数量的
    let relationids = [];
    //有规格的情况下
    if(properties.value.length>0){
      //规格
      let SkuProps = AddCart.selectedSkuComb.properties;
      SkuProps.map((item)=>{
        var id = item['v'][0] ?item['v'][0]['id'] : 0;
        if(id) relationids.push(id)
      })
    }
    //封装数据
    var params = {
      busid:busid,
      proid:proid,
      relationids:relationids.join(","),//转化成字符串
      nums:AddCart.selectedNum//数量
    }
    // console.log(AddCart.selectedNum)
    //隐藏弹出框 把弹出框隐藏
    SkuShow.value = false
    //发起请求
    var result = await proxy.$POST({
      url:'/cart/add',
      params
    })
    if(!result) return false
    if(result.code == 0){
      proxy.$fail(result.msg)
      return false
    }
    
    proxy.$router.push({path:'/cart/confirm',query:{cartids:result.data.cartid}})

  }
  
  //前往购物车页面
  const ToCart = async ()=>{
    // proxy.$router.push({path:'/cart',query:{proid:proid}})
    proxy.$router.push('/cart')

  }


</script>

<style scoped>
@import url('/assets/css/ProductInfo.css');
</style>